<template>
	<div>
		<!-- 头部 -->
		<el-form ref="searchForm" :inline="true" style="margin-top: 20px;" >
			<el-form-item>
				<el-button type="primary" size=small icon="el-icon-plus" @click="add" v-if="addBottonPk=='1196410850609463296'">新增</el-button>
				<el-button type="warning" size=small icon="el-icon-edit" @click="edit" v-if="updateBottonPk=='1196410956163317760'">修改</el-button>
				<el-button type="danger" size=small icon="el-icon-delete" @click="del" v-if="delBottonPk=='1196411128817647616'">删除</el-button>
				<el-button type="success" size=small icon="el-icon-refresh-left" @click="refresh">刷新</el-button>
			</el-form-item>
		</el-form>
		<!-- table -->
		<el-table :data="tableData" style="width: 100%" row-key="pk" border lazy :load="load" @row-click="rowClick"
			highlight-current-row :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
			<el-table-column
			  prop="name"
			  label="菜单名称"
			  width="250">
			</el-table-column>
			<el-table-column
			  prop="pk"
			  label="唯一编码(pk)"
			  width="180">
			</el-table-column>
			<el-table-column
			  prop="icon"
			  label="菜单图标"
			  width="180">
			</el-table-column>
			<el-table-column
			  prop="url"
			  label="url地址">
			</el-table-column>
			<el-table-column
			  prop="num"
			  label="菜单排序号">
			</el-table-column>
		</el-table>
		<el-dialog title="菜单明细" :visible.sync="dialogFormVisible" v-if="dialogFormVisible" :show-close="false" :destroy-on-close="true">
		  <el-form :model="form">
			<el-form-item label="功能类型" style="margin-left: 7%;">
			  <el-select v-model="form.c1" placeholder="请选择" style="width: 50%;">
				<el-option v-for="item in options"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			  </el-select>
			</el-form-item>
			<el-form-item label="功能名称" :label-width="formLabelWidth">
			  <el-input v-model="form.name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="菜单图标" :label-width="formLabelWidth">
			  <el-input v-model="form.icon" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="菜单url" :label-width="formLabelWidth">
			  <el-input v-model="form.url" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="菜单排序号" :label-width="formLabelWidth">
			  <el-input v-model="form.num" autocomplete="off"></el-input>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
			<el-button @click="cancel">取 消</el-button>
			<el-button type="primary" @click="save">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
    data() {
      return {
		options:[{
			value:'1',
			label:'菜单'
		},
		{
			value:'2',
			label:'按钮'
		},
		{
			value:'3',
			label:'API',
		}
		],
        tableData: [],
		dialogFormVisible: false,
        form: {
		  c1:'',
		  pk:'0',
          name: '',
		  pcode:'0',
          region: '',
          icon: '',
          url: '',
          num: ''
        },
        formLabelWidth: '120px',
		addBottonPk:"1196410850609463296",//主页按钮唯一标识，也是按钮pk
		delBottonPk:"1196411128817647616",
		updateBottonPk:"1196410956163317760"
      }
    },
    methods: {
		load(tree, treeNode, resolve) {
		  this.getAxios("sysMenu/list/"+tree.pk).then(resp=>{
			if(resp.code==200){
				resolve(resp.data)
			}else{
				this.$message.error(resp.message);
			}
		  })
		},
		rowClick(row, column, event){//选中行触发事件
			this.form.pk=row.pk;
			this.form.pcode=row.pcode;
		},
		getList(val){//获取首页列表数据
			var pcode =null;
			 if(val==''||val==undefined||val==null){
				 pcode=this.form.pk;
			 }else{
				 pcode=val;
			 }
			this.getAxios("sysMenu/list/"+pcode).then(resp=>{
				if(resp.code==200){
					this.tableData=resp.data;
				}else{
					this.$message.error(resp.message);
				}
			})
		},
		add(){
		  this.dialogFormVisible=true;
		  this.form.pcode=this.form.pk;
		  this.form.pk="";
		},
		edit(){
			var pk = this.form.pk
			if(pk==0){
				this.$message.error("请选择修改项");
				return;
			}
			this.getAxios("sysMenu/query/"+pk).then(resp=>{
				if(resp.code==200){
					this.dialogFormVisible=true;
					this.form=resp.data;
				}
			})
		},
		del(){
			if(this.form.pk==0){
				this.$message.error("请选择删除项");
				return;
			}
			this.$confirm('确定要删除吗, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
				this.getAxios("sysMenu/delete/"+this.form.pk).then(resp=>{
					if(resp.code==200){
						this.$message.success("删除成功");
						this.refresh();
					}else{
						this.$message.error("删除失败");
					}
				})
			}).catch(() => {
			  this.$message({
				type: 'info',
				message: '已取消删除'
			  });          
			});
		},
		refresh(){
			window.location.reload();
		},
		save(){
			this.postAxios("sysMenu/save",{str:JSON.stringify(this.form)}).then(resp=>{
				if(resp.code==200){
					this.$message.success(resp.message);
					this.refresh();
					this.cancel();
				}else{
					this.$message.error(resp.message);
				}
			})
		},
		cancel(){
			var pk=this.form.pk
			this.form={};
			this.form.pk=pk;
			this.dialogFormVisible=false;
		},
		/**
		 * 获取按钮是否显示的权限
		 */
		bottonPermissions(){
			var pointPks=[];
			var pointList=localStorage.getItem("POINT_LIST");
			pointList = JSON.parse(pointList);
			for (var i = 0; i < pointList.length; i++) {
				pointPks.push(pointList[i].pk);
			}
			if(pointPks.indexOf(this.addBottonPk)==-1){
				this.addBottonPk="1";
			}
			if(pointPks.indexOf(this.delBottonPk)==-1){
				this.delBottonPk="1";
			}
			if(pointPks.indexOf(this.updateBottonPk)==-1){
				alert(2)
				this.updateBottonPk="1";
			}
		},
    },
	mounted(){
		this.getList();
		this.bottonPermissions()
	}
  }
</script>

<style scoped>
	/* 用来设置当前页面element全局table 选中某行时的背景色*/
	.el-table__body tr.current-row>td{
	  background-color: #f19944 !important;
	  /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
	}
	/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
	.el-table--enable-row-hover .el-table__body tr:hover>td {
	  background-color: #f19944;
	  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
	}
</style>
